import * as Cesium from "cesium";

let viewer = new Cesium.Viewer("cesiumContainer");
let position = Cesium.Cartesian3.fromDegrees(-75.5967069, 40.03879587, 102);
Cesium.Cesium3DTileset.fromIonAssetId(40866)
  .then((tileset) => {
    viewer.scene.primitives.add(tileset);
    viewer.zoomTo(tileset);
  })
  .catch((err) => {});

let htmloverlay = document.createElement("div");
htmloverlay.classList.add("htmloverlay");
htmloverlay.innerHTML =
  "<span class='custom-style-label'>定制化文本信息</span>";
htmloverlay.style.position = "absolute";
viewer.container.appendChild(htmloverlay);

viewer.scene.preRender.addEventListener(function () {
  const canvasHeight = viewer.scene.canvas.height;
  const windowPosition = Cesium.SceneTransforms.worldToWindowCoordinates(
    viewer.scene,
    position,
    new Cesium.Cartesian2()
  );
  if (!windowPosition) return;
  console.clear();
  console.log(windowPosition);
  const elwidth = htmloverlay.offsetWidth; //容器宽度
  let offsetX = -elwidth / 2;
  let offsetY = 0;
  htmloverlay.style.left = windowPosition.x + offsetX + "px";
  htmloverlay.style.bottom = canvasHeight - windowPosition.y + offsetY + "px";
  let occ = new Cesium.EllipsoidalOccluder(
    Cesium.Ellipsoid.WGS84,
    viewer.camera.position
  );
  htmloverlay.style.display = occ.isPointVisible(position) ? "block" : "none";
});
